<!-- 个人展示页 -->
<template>
  <div class=".app">
    <!-- 顶部导航栏 -->
    <head-nav-bar>
      <template #left>
        <div class="head_name" @click="back">
          <img
            class="return"
            src="https://www.hualigs.cn/image/60408d2367fba.jpg"
            alt=""
          />
          <span class="return_">返回</span>
        </div>
      </template>
      <template #center>
        <div class="head_name2">我发布的帖子</div>
      </template>
    </head-nav-bar>

    <div class="details-body">
      <!-- 个人介绍 -->
      <div class="personal">
        <img
          class="avatar"
          src="https://www.hualigs.cn/image/60364a03036ce.jpg"
        />
        <div class="introduce">
          <p>
            <span class="name">{{ info.name }}</span>
            <span class="sex">♂<img src="" /> 25</span>
            <span class="constellation">处女座</span>
          </p>
          <p class="location">
            <span>现居住 : 上海</span>
          </p>
        </div>
      </div>

      <!-- 关注粉丝 -->
      <div class="flow">
        <div class="follows">
          <p class="number">111</p>
          <p class="follow">关注</p>
        </div>
        <div class="fans">
          <p class="number">1111</p>
          <p class="fan">粉丝</p>
        </div>
      </div>

      <!-- 它的说说 -->
      <div class="invitations">
        <YourPost />
      </div>
    </div>
    <div class="block"></div>
    <div class="details-footer">
      <router-link
        :to="{ name: 'onlyinfo', params: { id: info.name, name: info.socket } }"
      >
        <div class="talk-about">
          <img
            class="footer_img"
            src="https://www.hualigs.cn/image/6040f216811ea.jpg"
            alt=""
          />
          对话
        </div></router-link
      >
      <div class="follow-it">
        <img
          class="footer_img"
          src="https://www.hualigs.cn/image/6040f216813b9.jpg"
          alt=""
        />
        关注
      </div>
    </div>
  </div>
</template>

<script>
import YourPost from "./YourPost";
import HeadNavBar from "./HeadNavBar";
import http from "../API/http.js";
export default {
  name: "DetailsPersonal",
  props: {},
  creater() {
    this.init();
  },
  data() {
    return {
      info: {
        name: "张三",
        socket: "",
        userid: ""
      }
    };
  },
  sockets: {
    receiveMsg(data) {
      console.log(data);
      let datas = this.$store.state.userinfo.userList;
      // console.log(datas);
      var flag = true;
      if (datas.length === 0) {
        this.$store.commit("setuserList", data);
      } else {
        for (let i = 0; i < datas.length; i++) {
          // console.log(datas[i]);
          if (datas[i].userid === data.userid) {
            datas[i].content = data.content;
            // console.log("第二次发");
            flag = false;
            break;
          }
        }
        if (flag === true) {
          this.$store.commit("setuserList", data);
          // console.log("第一次发");
        }
      }
    }
  },
  methods: {
    async init() {
      // const data = await http._detail({});
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  },
  components: {
    HeadNavBar,
    YourPost
  },
  created() {
    // console.log(this.$route);
    this.info.name = this.$route.params.id;
    this.info.socket = this.$route.params.name;
    this.info.userid = this.$route.params.userid;
    console.log(this.$route.params.userid);
  }
  // watch: {
  //   '$route' (to,from) {
  //     console.log(from.params)
  //     console.log(to.params)
  //     console.log(this.currentIndex)
  //   }
  // }
};
</script>

<style scoped>
.app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f3f3f3;
}
.head_name {
  position: absolute;
  height: 25px;
  width: 60px;
  line-height: 25px;
}
.return {
  position: absolute;
  top: 2px;
  height: 21px;
  width: 21px;
}
.return_ {
  position: absolute;
  top: 0;
  left: 22px;
  height: 25px;
  line-height: 25px;
}
.head_name2 {
  margin: 0 auto;
}

.details-body {
  width: 100%;
  /* margin-top: 60px; */
  height: 100%;
  background: #2d2d2d;
  overflow-y: scroll;
}

.details-body::-webkit-scrollbar {
  width: 0;
}

/* 个人介绍区 */
.personal {
  background: #2d2d2d;
  height: 90px;
  color: white;
  font-size: 14px;
  position: relative;
}
/* 个人介绍：头像 */
.avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  /* margin-left: 2rem;
  margin-top: 1rem; */
}
/* 个人介绍：简介 */
.introduce {
  height: 60px;
  display: inline-block;
  width: 66%;
  position: absolute;
  left: 30%;
  top: 50%;
  transform: translateY(-50%);
  /* margin-left: 1rem; */
}
.introduce p {
  padding: 0;
  margin: 0;
}
.introduce .name {
  font-size: 16px;
}
.introduce .sex,
.constellation {
  display: inline-block;
  background-color: #97bcee;
  text-align: center;
  border-radius: 5px;
  font-size: 12px;
  margin-left: 10px;
  padding: 2px 10px;
}
.introduce .constellation {
  background-color: #cc9a28;
  margin-bottom: 15px;
}
/* .location{
  margin-top: 10px;
} */
/* 关注&&粉丝 */
.flow {
  background: #ffffff;
  color: #666666;
  font-size: 12px;
  height: 50px;
  border: 1px solid #e0e0e0;
}
.flow .number {
  color: #00aeff;
  font-weight: bold;
}
.follows,
.fans {
  box-sizing: border-box;
  display: inline-block;
  width: 49%;
  text-align: center;
  height: 50px;
}
.fans {
  border-left: 1px solid #e0e0e0;
}
.flow .number {
  margin-top: 5px;
}
.flow p {
  margin: 0;
  padding: 0;
  line-height: 20px;
}

/* ta 发表的说说 */
.invitations {
  height: 100%;
  width: 100%;
  background: #f2f2f2;
  padding: 1rem;
}
.invitations .scroll {
  height: 100%;
  margin-top: -1rem;
}

.details-footer {
  height: 8%;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  background: #2d2d2d;
}
.details-footer .talk-about,
.details-footer .follow-it {
  display: inline-block;
  width: 49%;
  text-align: center;
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  position: relative;
}
.details-footer img {
  display: inline-block;
  position: absolute;
  left: 20%;
  top: 30%;
  /* transform: scale(1.3); */
  height: 22px;
}
.block {
  width: 100%;
  height: 70px;
  position: relative;
  bottom: 0px;
  background: #f2f2f2;
}
</style>
